diff --git a/packages/theme/package.json b/packages/theme/package.json
index 932e22f..565fe4c 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -4,11 +4,23 @@
   "main": "dist/index.js",
   "module": "dist/theme.esm.js",
   "types": "dist/index.d.ts",
+  "description": "@paljs/theme package for @paljs/ui package",
+  "repository": "https://github.com/paljs/ui.git",
+  "author": "Ahmed Elywa  <hello@paljs.com> (https://github.com/paljs/ui)",
+  "license": "MIT",
   "scripts": {
     "test": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
     "build": "tsdx build --transpileOnly",
     "prepack": "yarn build",
     "start": "tsdx watch"
-  }
+  },
+  "files": [
+    "dist"
+  ],
+  "bugs": {
+    "url": "https://github.com/paljs/ui",
+    "email": "hello@paljs.com"
+  },
+  "homepage": "https://github.com/paljs/ui"
 }
diff --git a/packages/ui/src/Col/index.tsx b/packages/ui/src/Col/index.tsx
index 86e933b..fe5f2b2 100644
--- a/packages/ui/src/Col/index.tsx
+++ b/packages/ui/src/Col/index.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { breakpointUp, getGridSize, breakpoints, getGridGutter, BreakPointKeys } from '@paljs/theme';
+import { breakpointUp, getGridSize, breakpoints, getGridGutter, BreakPointKeys } from '../breakpoints';
 
 const BP = Object.keys(breakpoints);
 
diff --git a/packages/ui/src/Container/index.tsx b/packages/ui/src/Container/index.tsx
index 8cfe684..7889308 100644
--- a/packages/ui/src/Container/index.tsx
+++ b/packages/ui/src/Container/index.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { maxContainer, breakpointUp, getGridGutter, BreakPointKeys } from '@paljs/theme';
+import { maxContainer, breakpointUp, getGridGutter, BreakPointKeys } from '../breakpoints';
 
 const width = css<{ fluid?: boolean }>`
   ${({ fluid }) =>
diff --git a/packages/ui/src/Layout/style.ts b/packages/ui/src/Layout/style.ts
index 7a9cfe7..bb545c4 100644
--- a/packages/ui/src/Layout/style.ts
+++ b/packages/ui/src/Layout/style.ts
@@ -5,7 +5,8 @@
  */
 
 import styled, { css } from 'styled-components';
-import { breakpointDown, ThemeKeys, ThemeObject } from '@paljs/theme';
+import { ThemeKeys, ThemeObject } from '@paljs/theme';
+import { breakpointDown } from '../breakpoints';
 import SidebarStyle from '../Sidebar/style';
 import { scrollbars } from '../utils';
 
diff --git a/packages/ui/src/Row/index.tsx b/packages/ui/src/Row/index.tsx
index 7bd8f0b..5f9ff53 100644
--- a/packages/ui/src/Row/index.tsx
+++ b/packages/ui/src/Row/index.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { breakpointUp, getGridGutter, BreakPointKeys } from '@paljs/theme';
+import { breakpointUp, getGridGutter, BreakPointKeys } from '../breakpoints';
 
 const RowStyle = styled.div<RowProps>`
   display: flex;
diff --git a/packages/ui/src/Sidebar/index.tsx b/packages/ui/src/Sidebar/index.tsx
index 6800d1f..b950d49 100644
--- a/packages/ui/src/Sidebar/index.tsx
+++ b/packages/ui/src/Sidebar/index.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import SidebarStyle from './style';
-import { ifWidthInBreakpoint, BreakPointKeys } from '@paljs/theme';
+import { ifWidthInBreakpoint, BreakPointKeys } from '../breakpoints';
 
 export interface SidebarStyleProps {
   state?: 'hidden' | 'visible' | 'compacted' | 'expanded';
diff --git a/packages/ui/src/Sidebar/style.ts b/packages/ui/src/Sidebar/style.ts
index a704f68..aabf296 100644
--- a/packages/ui/src/Sidebar/style.ts
+++ b/packages/ui/src/Sidebar/style.ts
@@ -5,7 +5,7 @@
  */
 
 import styled, { css } from 'styled-components';
-import { breakpointDown } from '@paljs/theme';
+import { breakpointDown } from '../breakpoints';
 import { MenuStyle } from '../Menu/style';
 import { scrollbars } from '../utils';
 import { SidebarStyleProps } from './index';